<!-- 求职用户行为量统计 -->
<template>
  <div class='behaviorStatisticsUsers'>
    <!-- 头部 -->
    <echartsHeader title="求职用户行为量统计示例" />
    <br />

    <!-- 统计 块 -->
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in arrNum" :key="index">
        <div class="grid-content bg-purple">
          <Statistics :title="item.title" :number="item.number" />
        </div>
      </el-col>
    </el-row>

    <br />
    <br />
    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in arrNum" :key="index">
        <div class="grid-content bg-purple">
          <Statistics :title="item.title" :number="item.number" />
        </div>
      </el-col>
    </el-row>
    <br />
    <br />

    <el-row :gutter="20">
      <el-col :span="4" v-for="(item,index) in arrNum" :key="index">
        <div class="grid-content bg-purple">
          <Statistics :title="item.title" :number="item.number" />
        </div>
      </el-col>
    </el-row>
    <br />
    <br />

    <!-- 图表1 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="投递转化率">
            <!-- id不要重复 -->
            <div id="ec_1"></div>
          </blockContent>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="饼图" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_2"></div>
          </blockContent>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />
    <!-- 图表2 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="柱状图">
            <!-- id不要重复 -->
            <div id="ec_3"></div>
          </blockContent>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="雷达图" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_4"></div>
          </blockContent>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />
    <!-- 图表3 -->
    <el-row :gutter="20">
      <el-col>
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="漏斗图" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_5"></div>
          </blockContent>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />
    <!-- 图表4 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="漏斗图" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_6"></div>
          </blockContent>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="仪表图" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_7"></div>
          </blockContent>
        </div>
      </el-col>
    </el-row>
    <br />
    <br />
    <!-- 图表5 -->
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="饼图1" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_8"></div>
          </blockContent>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="饼图2" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_9"></div>
          </blockContent>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <!-- 内容+图表 -->
          <blockContent title="饼图3" contentHeight="400">
            <!-- id不要重复 -->
            <div id="ec_10"></div>
          </blockContent>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 引入封装插件，需求不够跟我说
import { MyEcharts } from '@/components/page/DataCenter/utils/echart-utils'
console.log(MyEcharts, 'MyEcharts')
export default {
  components: {},
  data () {
    return {
      // 传递表格的数据
      // 折现
      Line: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'line',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'line',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'line',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      // 环状饼图
      pie: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
              position: 'inner'
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 335, name: '直达', selected: true },
              { value: 679, name: '营销广告' },
              { value: 1548, name: '搜索引擎' }
            ]
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#eee',
              borderColor: '#aaa',
              borderWidth: 1,
              borderRadius: 4,
              // shadowBlur:3,
              // shadowOffsetX: 2,
              // shadowOffsetY: 2,
              // shadowColor: '#999',
              // padding: [0, 7],
              rich: {
                a: {
                  color: '#999',
                  lineHeight: 22,
                  align: 'center'
                },
                // abg: {
                //     backgroundColor: '#333',
                //     width: '100%',
                //     align: 'right',
                //     height: 22,
                //     borderRadius: [4, 4, 0, 0]
                // },
                hr: {
                  borderColor: '#aaa',
                  width: '100%',
                  borderWidth: 0.5,
                  height: 0
                },
                b: {
                  fontSize: 16,
                  lineHeight: 33
                },
                per: {
                  color: '#eee',
                  backgroundColor: '#334455',
                  padding: [2, 4],
                  borderRadius: 2
                }
              }
            },
            data: [
              { value: 335, name: '直达' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1048, name: '百度' },
              { value: 251, name: '谷歌' },
              { value: 147, name: '必应' },
              { value: 102, name: '其他' }
            ]
          }
        ]
      },
      // 柱状图
      bar: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            name: '邮件营销',
            type: 'bar',
            stack: '总量',
            barWidth: 25,
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '联盟广告',
            type: 'bar',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '视频广告',
            type: 'bar',
            stack: '总量',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '直接访问',
            type: 'bar',
            stack: '总量',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '搜索引擎',
            type: 'bar',
            stack: '总量',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      // 雷达图
      radar: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          value: [4300, 10000, 28000, 35000, 50000, 19000],
          type: 'radar',
          name: '预算分配（Allocated Budget）'
        },
        {
          value: [5000, 14000, 28000, 31000, 42000, 21000],
          name: '实际开销（Actual Spending）',
          type: 'radar',
        }]
      },

      // 漏斗图1
      funnel: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '漏斗图',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '5%',
          top: '50%',
          data: [
            { value: 60, name: '访问' },
            { value: 30, name: '咨询' },
            { value: 10, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' }
          ]
        },
        {
          name: '金字塔',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '5%',
          top: '5%',
          sort: 'ascending',
          data: [
            { value: 60, name: '访问' },
            { value: 30, name: '咨询' },
            { value: 10, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' }
          ]
        },
        {
          name: '漏斗图',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '55%',
          top: '5%',
          label: {
            position: 'left'
          },
          data: [
            { value: 60, name: '访问' },
            { value: 30, name: '咨询' },
            { value: 10, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' }
          ]
        },
        {
          name: '金字塔',
          type: 'funnel',
          width: '40%',
          height: '45%',
          left: '55%',
          top: '50%',
          sort: 'ascending',
          label: {
            position: 'left'
          },
          data: [
            { value: 60, name: '访问' },
            { value: 30, name: '咨询' },
            { value: 10, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' }
          ]
        }]
      },
      // 漏斗图2
      funnel2: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '漏斗图',
          type: 'funnel',
          left: '10%',
          top: 60,
          //x2: 80,
          bottom: 60,
          width: '80%',
          // height: {totalHeight} - y - y2,
          min: 0,
          max: 100,
          minSize: '0%',
          maxSize: '100%',
          sort: 'descending',
          gap: 2,
          label: {
            show: true,
            position: 'inside'
          },
          labelLine: {
            length: 10,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          itemStyle: {
            borderColor: '#fff',
            borderWidth: 1
          },
          emphasis: {
            label: {
              fontSize: 20
            }
          },
          data: [
            { value: 60, name: '访问' },
            { value: 40, name: '咨询' },
            { value: 20, name: '订单' },
            { value: 80, name: '点击' },
            { value: 100, name: '展现' }
          ]
        }]
      },
      // 仪表图
      gauge: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '速度',
          type: 'gauge',
          min: 0,
          max: 220,
          splitNumber: 11,
          radius: '50%',
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
              width: 3,
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {            // 坐标轴小标记
            fontWeight: 'bolder',
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 10
          },
          axisTick: {            // 坐标轴小标记
            length: 15,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          splitLine: {           // 分隔线
            length: 25,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width: 3,
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {           // 分隔线
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          title: {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontSize: 20,
              fontStyle: 'italic',
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail: {
            backgroundColor: 'rgba(30,144,255,0.8)',
            borderWidth: 1,
            borderColor: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 5,
            offsetCenter: [0, '50%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              color: '#fff'
            }
          },
          data: [{ value: 40, name: 'km/h' }]
        },
        {
          name: '转速',
          type: 'gauge',
          center: ['25%', '55%'],    // 默认全局居中
          radius: '30%',
          min: 0,
          max: 7,
          endAngle: 45,
          splitNumber: 7,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.29, 'lime'], [0.86, '#1e90ff'], [1, '#ff4500']],
              width: 2,
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {            // 坐标轴小标记
            fontWeight: 'bolder',
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 10
          },
          axisTick: {            // 坐标轴小标记
            length: 12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          splitLine: {           // 分隔线
            length: 20,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width: 3,
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            width: 5,
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          title: {
            offsetCenter: [0, '-30%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontStyle: 'italic',
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail: {
            //backgroundColor: 'rgba(30,144,255,0.8)',
            // borderWidth: 1,
            borderColor: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 5,
            width: 80,
            height: 30,
            offsetCenter: [25, '20%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              color: '#fff'
            }
          },
          data: [{ value: 1.5, name: 'x1000 r/min' }]
        },
        {
          name: '油表',
          type: 'gauge',
          center: ['75%', '50%'],    // 默认全局居中
          radius: '30%',
          min: 0,
          max: 2,
          startAngle: 135,
          endAngle: 45,
          splitNumber: 2,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
              width: 2,
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisTick: {            // 坐标轴小标记
            length: 12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {
            fontWeight: 'bolder',
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 10,
            formatter: function (v) {
              switch (v + '') {
                case '0': return 'E';
                case '1': return 'Gas';
                case '2': return 'F';
              }
            }
          },
          splitLine: {           // 分隔线
            length: 15,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width: 3,
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            width: 2,
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          title: {
            show: false
          },
          detail: {
            show: false
          },
          data: [{ value: 0.5, name: 'gas' }]
        },
        {
          name: '水表',
          type: 'gauge',
          center: ['75%', '50%'],    // 默认全局居中
          radius: '30%',
          min: 0,
          max: 2,
          startAngle: 315,
          endAngle: 225,
          splitNumber: 2,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.2, 'lime'], [0.8, '#1e90ff'], [1, '#ff4500']],
              width: 2,
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisTick: {            // 坐标轴小标记
            show: false
          },
          axisLabel: {
            fontWeight: 'bolder',
            color: '#fff',
            shadowColor: '#fff', //默认透明
            shadowBlur: 10,
            formatter: function (v) {
              switch (v + '') {
                case '0': return 'H';
                case '1': return 'Water';
                case '2': return 'C';
              }
            }
          },
          splitLine: {           // 分隔线
            length: 15,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width: 3,
              color: '#fff',
              shadowColor: '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            width: 2,
            shadowColor: '#fff', //默认透明
            shadowBlur: 5
          },
          title: {
            show: false
          },
          detail: {
            show: false
          },
          data: [{ value: 0.5, name: 'gas' }]
        }]
      },
      // 普通饼图
      pieImg: {
        legend: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
        xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' },
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' },
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' },
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      },
      arrNum: [
        { title: '累计注册量2', number: '9999' },
        { title: '累计登录量', number: '9999' },
        { title: '累计简历量', number: '9999' },
        { title: '累计投递量', number: '9999' },
        { title: '累计面试邀请量', number: '9999' },
        { title: '累计聊天量', number: '9999' }
      ]
    };
  },
  computed: {},
  watch: {},
  methods: {
    optionChart () {
      let option_pie = MyEcharts.EchartsOption.Line('', '', this.Line)
      MyEcharts.initChart(option_pie, 'ec_1')

      let option_pie2 = MyEcharts.EchartsOption.pie('', '', this.pie)
      MyEcharts.initChart(option_pie2, 'ec_2')

      let option_pie3 = MyEcharts.EchartsOption.Line('', '', this.bar)
      MyEcharts.initChart(option_pie3, 'ec_3')

      let option_pie4 = MyEcharts.EchartsOption.Radar('', '', this.radar)
      MyEcharts.initChart(option_pie4, 'ec_4')

      let option_pie5 = MyEcharts.EchartsOption.Funnel('', '', this.funnel)
      MyEcharts.initChart(option_pie5, 'ec_5')

      let option_pie6 = MyEcharts.EchartsOption.Funnel('', '', this.funnel2)
      MyEcharts.initChart(option_pie6, 'ec_6')

      let option_pie7 = MyEcharts.EchartsOption.Gauge('', '', this.gauge)
      MyEcharts.initChart(option_pie7, 'ec_7')

      let option_pie8 = MyEcharts.EchartsOption.pie('', '', this.pieImg)
      MyEcharts.initChart(option_pie8, 'ec_8')


      let option_pie9 = MyEcharts.EchartsOption.Gauge('', '', this.pieImg)
      MyEcharts.initChart(option_pie9, 'ec_9')

      let option_pie10 = MyEcharts.EchartsOption.pie('', '', this.pieImg)
      MyEcharts.initChart(option_pie10, 'ec_10')
    }
  },
  created () {
  },
  mounted () {
    // 为了模拟数据返回等待的时间，同时也是为了更好的初始化实例
    setTimeout(() => {
      this.optionChart()
    }, 500);
  },
  beforeCreate () { },
  beforeMount () {
  },
  beforeUpdate () { },
  updated () {

  },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.behaviorStatisticsUsers {
    background: #080850;
}
#ec_1 {
    height: 300px;
}

#ec_2 {
    height: 300px;
}

#ec_3 {
    height: 300px;
}

#ec_4 {
    height: 300px;
}

#ec_5 {
    height: 300px;
}

#ec_6 {
    height: 300px;
}

#ec_7 {
    height: 300px;
}

#ec_8 {
    height: 300px;
}
#ec_9 {
    height: 300px;
}
#ec_10 {
    height: 300px;
}
</style>